<template>
  <section>
    <el-button size="mini" @click="addCategoryBtn" type="primary">新建一级分类</el-button>
    <el-row style="color: crimson;margin-top: 10px">*拖曳标签进行层级变化。
    </el-row>
    <el-row style="margin-top: 10px">
      <el-tree :data="productCategoryList" node-key="id" :props="defaultProps" default-expand-all :expand-on-click-node="false" ref="tree" :filter-node-method="filterNode"
               @node-drag-start="handleDragStart"
               @node-drag-end="handleDragEnd"
               @node-drop="handleDrop"
               draggable>
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span v-if="node.level === 1" class="firstline">{{node.level}}-{{ data.name }}</span>
        <span v-else-if="node.level === 2" class="secondline">{{node.level}}-{{ data.name }}</span>
        <span v-else>{{node.level}}-{{ data.name }}</span>
        <span>
          <el-button type="text" size="mini" @click="edit(node,data)">编辑</el-button>
          <el-button type="text" size="mini" @click="append(data)">增加</el-button>
          <el-button type="text" size="mini" @click="remove(node, data)" style="color: red">删除</el-button>
        </span>
      </span>
      </el-tree>
    </el-row>
    <el-row>
      <el-dialog :title="currCategory.id?'编辑':'新建'" :visible.sync="showCategoryDialog" v-if="showCategoryDialog">
        <new-category :category="currCategory" v-on:confirm="confirmCategoryDialogBtn"></new-category>
      </el-dialog>
    </el-row>
  </section>
</template>

<script>
  import newCategory from './newProductCategory'
  import errHandler from '@/assets/errHandler.js'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "productCategory",
    components:{newCategory},
    data() {
      return {
        productCategoryList:null,
        defaultProps: {
          children: 'childrens',
          label: 'name'
        },
        currCategory:null,
        propList:[{key:'虚拟',val:false,code:'virtual'}],
        showCategoryDialog:false
      }
    },
    created() {
      this.getProductCategoryList()
    },
    mounted() {
    },
    computed: {
      ...mapGetters(['department']),
    },
    watch: {},
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      addCategoryBtn(){//新建一级分类
        this.currCategory={}
        this.showCategoryDialog=true
      },
      append(category){
        console.log(category)
        this.currCategory={parentId:category.id,data:{...category.data}}
        console.log(this.currCategory)
        this.showCategoryDialog=true
      },
      remove(node, data){
        this.loading=true
        this.$confirm('确认删除？')
          .then(()=> {
            this.fetch({name:"deleteFamilyProductCategory",data:{id:data.id}})
              .then(res=>{
                console.log(res)
                this.getProductCategoryList()
                this.loading=false
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
      handleDragStart(node, ev) {
      },
      handleDragEnd(draggingNode, dropNode, dropType, ev) {
      },
      handleDrop(draggingNode, dropNode, dropType, ev) {
        console.log(draggingNode, dropNode, dropType, ev)
        //组装参数，被拖曳的id，拖进的id
        let data =draggingNode.data//被拖曳的节点
        if(dropType === 'inner'){
          data.parentId=dropNode.key
        }else {
          data.parentId=dropNode.parent.key
        }
        if(data.parentId === undefined){
          data.parentId = 0
        }
        this.updateProductCategory(data)
      },
      getProductCategoryList(){
        this.fetch({name:"getProductCategoryList"})
          .then(res=>{
            console.log('产品分类列表-----------',JSON.stringify(res))
            this.productCategoryList=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      edit(node,data){
        console.log(node,data)
        this.currCategory=data
        this.showCategoryDialog=true
      },
      confirmCategoryDialogBtn(e){
        console.log('dialog里的数据————————',e)
        if(e.id){
          //编辑更新
          this.updateProductCategory(e)
        }else {
          //新建
          this.createProductCategory(e)
        }
      },
      createProductCategory(form){
        this.fetch({name:"createProductCategory",data:{...form}})
          .then(res=>{
            console.log(res)
            this.getProductCategoryList()
            this.showCategoryDialog = false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      updateProductCategory(data){
        console.log(data)
        this.fetch({name:"updateProductCategory",data:{...data}})
          .then(res=>{
            this.showCategoryDialog=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
    }
  }
</script>

<style scoped>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
    line-height: 25px;
  }
  .firstline{
    font-size: 15px;
    font-weight: bold;
    line-height: 40px;
  }
  .secondline{
    font-size: 14px;
    line-height: 40px;
    /*font-weight: bold;*/
  }
</style>
